<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="90%"
    :close-on-click-modal="false"
  >
    <el-table :data="tableData" :loading="loading">
       <el-table-column 
      type="index" 
      label="序号" 
      width="60" />
      <el-table-column prop="name" label="公司名称" />
      <el-table-column prop="applyCategoryName" label="类别名称" />
      <el-table-column prop="contactPerson" label="联系人" />
      <el-table-column prop="contactPhone" label="联系人手机" />
      <el-table-column prop="tag" label="供应商类型">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.tag === '1'"
            >合格供应商</el-tag
          >
          <el-tag type="warning" v-if="scope.row.tag === '2'"
            >暂停供应商</el-tag
          >
          <el-tag type="danger" v-if="scope.row.tag === '3'"
            >黑名单供应商</el-tag
          >
          <el-tag type="warning" v-if="scope.row.tag === ''">待审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="storeApplyTime"
        label="入库时间"
        :formatter="formatDate"
      />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import moment from "moment";
export default {
  data() {
    return {
       dialogVisible: false,
      title: "",
       loading:false,
       tableData: []
    };
  },
  methods: {
    async open(row) {
      this.loading = true
      this.title = row.name;
      this.tableData = row.child.sort((a, b) => {
                          if (a.applyCategoryName > b.applyCategoryName) {
                            return -1;
                          }
                          if (a.applyCategoryName < b.applyCategoryName) {
                            return 1;
                          }
                          return 0;
                        });
      this.dialogVisible = true;
      this.loading = false;
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    }
  }
};
</script>
